<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<!-- 
		Replace path to template, title, header and body
		with actual data.
	 -->
<ui:composition template="/templates/store.xhtml">
	<ui:define name="pageTitle">Information du compte</ui:define>
	<ui:define name="pageHead"></ui:define>
	<ui:define name="first"></ui:define>
	<ui:define name="body">

		
			
		<div class="row casse-big">
			<div class="medium-5 small-12 columns">
			<span class="title-style">Informations client</span><br/><br/>
				<input type="text" placeholder="Nom"/>
				<input type="text" placeholder="Prénom"/>
				<input type="text" placeholder="Adresse"/>
				<input type="text" placeholder="Numéro de téléphone"/>
			</div>
			<div class="medium-4 small-12 medium-offset-3 columns">
				<span class="title-style">Récapitulatif commande</span><br/><br/>
				<table>
					<thead>
						<tr>
							<th width="50">Article</th>
							<th width="50">Prix</th>
							<th width="50">Quantité</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Premier article</td>
							<td>15€</td>
							<td>2</td>
						</tr>
					</tbody>
					<tbody>
						<tr>
							<td>Second article</td>
							<td>30€</td>
							<td>10</td>
						</tr>
					</tbody>
					<tbody>
						<tr>
							<td>Troisieme article</td>
							<td>999€</td>
							<td>999</td>
						</tr>
					</tbody>
				</table>
			
			</div>
		</div>
		<div class="row">
			<div class="small-6 columns">
				<span class="title-style">Informations complémentaires</span><br/><br/>
			</div>
		</div>
		<div class="row">
			<div class="medium-5 small-12 columns">
				
				<input type="text" placeholder="Nom"/>
				<input type="text" placeholder="Prénom"/>
			</div>
			<div class="medium-6 small-12 columns">
				<input type="text" placeholder="Adresse de facturation"/>
				<input type="text" placeholder="Adresse de livraison"/>
			</div>
				
				
				
				
			
		</div>
		<div class="row">
			<div class="small-6 columns">
				<span class="title-style">Informations bancaires</span><br/><br/>
			</div>
		</div>
		<div class="row">
			<div class="medium-5 small-12 columns">
				
				<select>
					<option value="1">MasterCard</option>
					<option value="2">Visa</option>
					<option value="3">CB</option>
					<option value="4">American Express</option>
				</select>
				<input type="text" placeholder="N° de carte bancaire"/>
				<a href="#" class="button radius big">Valider le paiement</a>
				<a href="#"	class="button radius alert">Retour au panier</a>
				
			</div>
			<div class="medium-6 small-12 columns">
				<input type="text" placeholder="Code de sécurité"/>
				<input id="dateFinValidCarte" type="text"/>
				
			</div>
		</div>

	</ui:define>
	<ui:define name="last">
	<script>
    $('#dateFinValidCarte').datetimepicker({
    	 lang:'fr',
    	 timepicker:false,
    	 format:'d/m/Y'
    	});
  </script>
	
	
	
	
	</ui:define>
</ui:composition>

</html>